import React, { Component } from 'react';
import FootStyle from './FootStyleComp'
import { Link } from 'react-router-dom'

const Item = (props) => {
    if (props.id === 3 || props.id === 4) {
        var showCar = () => {
            props.onchange()
           
        }
    }

    return (
        <li onClick={showCar}>
            <Link
                to={{
                    pathname: `${props.path}`
                }}
            >
                <i className={'fa fa-' + props.icon} ></i>
                <span>{props.text}</span>
            </Link>
        </li>
    )
}

class Foot extends Component {
    constructor(props) {
        super(props);
        this.state = {
            foots: [
                {
                    id: 1,
                    icon: 'home',
                    text: '首页',
                    path: '/home'
                },
                {
                    id: 2,
                    icon: 'shopping-cart',
                    text: '购物车',
                    path: '/shopcar'
                },
                {
                    id: 3,
                    icon: '',
                    text: '立即购买',
                    path: ''
                },
                {
                    id: 4,
                    icon: '',
                    text: '加入购物车',
                    path: ''
                }
            ]
        };
    }



    renderItem = () => {
        return this.state.foots.map(item => <Item {...item} {...this.props}   key={item.id} />)
    }

    render() {
        return (
            <FootStyle>
                <ul className="footer" >
                    {this.renderItem()}
                </ul>
            </FootStyle>
        );
    }
}

export default Foot;